import { Radio, Spin, Tooltip } from "antd";
import { WeaTableNew } from "comsMobx";
import { WeaDialog,WeaNewScroll } from "ecCom";
import { inject, observer } from "mobx-react";
import { WeaAlertPage } from "ecCom";
import React from "react";
import { i18n } from "../../../public/i18n";
import * as Util from "../../../util/Util";
import { toJS } from "mobx";

const WeaTable = WeaTableNew.WeaTable;

/**
 * 系统工作记录展示
 */
@inject("individualMainStore")
@observer
export default class SysWorkRecordCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      postions: [
        // rings start
        {
          top: "2%",
          left: "40%",
        },
        {
          top: "47%",
          left: "27%",
        },
        {
          top: "17%",
          left: "66%",
        },
        {
          top: "63%",
          left: "47%",
        },
        {
          top: "23%",
          left: "23%",
        },
        {
          top: "43%",
          left: "63%",
        }, // roate start
        {
          top: "75%",
          left: "32%",
        },
        {
          top: "6%",
          left: "82%",
        },
        {
          top: "50%",
          left: "12%",
        },
        {
          top: "70%",
          left: "67%",
        },
        {
          top: "21%",
          left: "9%",
        },
        {
          top: "2%",
          left: "25%",
        }, // surround start
        {
          top: "57%",
          left: "80%",
        },
        {
          top: "1%",
          left: "11%",
        },
        {
          top: "68%",
          left: "4%",
        },
        {
          top: "34%",
          left: "85%",
        },
        {
          top: "72%",
          left: "20%",
        },
        {
          top: "1%",
          left: "60%",
        },
        {
          top: "40%",
          left: "3%",
        }, // width >=1000时 show
        {
          top: "31%",
          left: "36%",
        },
        {
          top: "63%",
          left: "58%",
        },
        {
          top: "18%",
          left: "55%",
        },
        {
          top: "53%",
          left: "38%",
        },
        {
          top: "39%",
          left: "75%",
        },
        {
          top: "82%",
          left: "55%",
        },
        {
          top: "14%",
          left: "18%",
        },
        {
          top: "78%",
          left: "77%",
        },
        {
          top: "77%",
          left: "12%",
        },
        {
          top: "36%",
          left: "71%",
        },
        {
          top: "12%",
          left: "1%",
        },
        {
          top: "79%",
          left: "82%",
        },
        {
          top: "50%",
          left: "86%",
        },
        {
          top: "22%",
          left: "88%",
        },
      ],
    };
    this.store = this.props.individualMainStore;
  }

  onDateConditionChange(event) {
    const { getSysWorkRecords, setRiskDateCond } = this.store;
    setRiskDateCond(event.target.value);
    getSysWorkRecords();
  }

  renderNoDataTips = () => {
    return (
      <div style={{ width: "100%", height: "310px" }}>
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@a2zvgm`} icon={<i className="icon-coms-NoData" />} iconSize={35}>
          <div style={{ textAlign: "center", marginTop: "4px" }}>
            {i18n.message.onNoData()}
          </div>
        </WeaAlertPage>
      </div>
    );
  };

  render() {
    const {
      personalIndexData: { sysWorkRecords },
      riskDateCond,
      workRecordTable,
      dialogProps: { workRecord },
      showWorkRecordDialog,
      closeWorkRecordDialog,
      loadings: { workRecordLoading },
    } = this.store;
    const _width = Util.getCurrentWidth();
    const { postions } = this.state;
    let data = toJS(sysWorkRecords);
    //sort
    data = data.sort((v1, v2) => v2.count - v1.count);
    // postion
    data = this.dataHandler(data, postions);
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5jp86g`} spinning={workRecordLoading}>
        <div className="portrait-personal-syswkrecord-container">
          <div className="top-wrapper">
            <div>
              <span className="titile-icon"></span>
              <span className="title">{i18n.module.systemWorkRecord()}</span>
            </div>
            <div>
              <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@l33z5l`}
                value={riskDateCond}
                buttonStyle="solid"
                size="middle"
                onChange={(event) => {
                  this.onDateConditionChange(event);
                }}
              >
                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@xygoep`} value={2}>{i18n.button.in3Days()}</Radio.Button>
                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@1q5wr3`} value={6}>{i18n.button.in7Days()}</Radio.Button>
                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@f7ctmf`} value={29}>{i18n.button.in30Days()}</Radio.Button>
              </Radio.Group>
            </div>
          </div>
          <div className="wr-public-bubble-container" style={{height: data.length === 0 ? "310px":"400px"}}>
            {data.length === 0 && this.renderNoDataTips()}
            {data.map((v,i) => {
              let style = v.isDot
                ? {}
                : {
                    top: v.top,
                    left: v.left,
                  };
              return (
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@4gzmz2@${i}`} title={v.name}>
                  <div
                    className={`circle ${v.isDot ? `dot` : `${v.mode}`} ${workRecordLoading ? '':'c-appear c-openShow--active'}`}
                    style={style}
                    onClick={() => showWorkRecordDialog(v)}
                  >
                    <div>{v.count}</div>
                    <div>{v.name}</div>
                  </div>
                </Tooltip>
              );
            })}
          </div>
          {workRecord.visible && (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@5q8w50`}
              visible={workRecord.visible}
              title={workRecord.title}
              style={workRecord.style}
              icon="icon-coms02-Portrait-of-personnel"
              iconBgcolor="#893D86"
              closable={true}
              onCancel={closeWorkRecordDialog}
            >
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@u92ywm`}
                  hasOrder={true}
                  needScroll={true}
                  scroll={{y:370}}
                  comsWeaTableStore={workRecordTable}
                />
            </WeaDialog>
          )}
        </div>
      </Spin>
    );
  }

  dataHandler = (data, postions) => {
    let resultArry = [];
    data = data.map((v, i) => {
      if (i === 0) {
        v.mode = "dot";
        v.isDot = true;
      } else if (0 < i && i < 7) {
        v.mode = "ring";
        v.isDot = false;
      } else if (7 <= i && i < 13) {
        v.mode = "rotate";
        v.isDot = false;
      } else if (13 <= i && i < 20) {
        v.mode = "surround";
        v.isDot = false;
      } else if (20 <= i && i < postions.length + 1) {
        v.mode = "surround random";
        v.isDot = false;
      }
      if (0 < i && i < postions.length + 1) {
        v.top = postions[i - 1].top;
        v.left = postions[i - 1].left;
      }
      if (resultArry.length < postions.length + 1) {
        resultArry.push(v);
      }
    });
    return resultArry;
  };
}
